<template>
  <div style="padding-bottom: 24px">
    <div class="view-equip-title">设备信息</div>
    <div class="view-equip-wrap">
      <div class="view-equip-content">
        <div class="view-equip-item">
          <div class="label">设备ID</div>
          <div class="text">{{ eqpDetailData.eqpId }}</div>
        </div>
        <div class="view-equip-item">
          <div class="label">设备名称</div>
          <div class="text">{{ eqpDetailData.eqpName }}</div>
        </div>
        <div class="view-equip-item">
          <div class="label">设备编号</div>
          <div class="text">{{ eqpDetailData.showName }}</div>
        </div>
      </div>
      <div class="view-equip-content">
        <div class="view-equip-item">
          <div class="label">科室</div>
          <div class="text">{{ eqpDetailData.classNameDesc }}</div>
        </div>
        <div class="view-equip-item">
          <div class="label">系统</div>
          <div class="text">{{ eqpDetailData.systemName }}</div>
        </div>
        <div class="view-equip-item">
          <div class="label">设备总称</div>
          <div class="text">{{ eqpDetailData.categoryName }}</div>
        </div>
      </div>
      <div class="view-equip-content">
        <div class="view-equip-item">
          <div class="label">设备类型</div>
          <div class="text">{{ eqpDetailData.typeName }}</div>
        </div>
        <div class="view-equip-item">
          <div class="label">设备型号</div>
          <div class="text">{{ eqpDetailData.modelName }}</div>
        </div>
        <div class="view-equip-item">
          <div class="label">设备位置</div>
          <div class="text">{{ eqpDetailData.positionNameAll }}</div>
        </div>
      </div>
      <div class="view-equip-content">
        <div class="view-equip-item large">
          <div class="label">资产编码</div>
          <div class="text">{{ eqpDetailData.poCode }}</div>
        </div>
        <div class="view-equip-item">
          <div class="label">管理属性</div>
          <div class="text">{{ tempManage }}</div>
        </div>
      </div>
      <div class="view-equip-content">
        <div class="view-equip-item">
          <div class="label">设备二维码</div>
          <div class="text">
            <px-upload v-model:file-list="qrcodeList" :limit="1" list-type="picture-card">
              <template #file="{ file }">
                <div>
                  <img class="px-upload-list__item-thumbnail" :src="file.url || file.fileUrl" alt="" />
                  <span class="px-upload-list__item-actions">
                    <span @click="photoPreview">
                      <px-icon><zoom-in /></px-icon>
                    </span>
                    <span @click="photoDownload(file)">
                      <px-icon>
                        <Download />
                      </px-icon>
                    </span>
                  </span>
                </div>
              </template>
            </px-upload>
            <px-dialog v-model="dialogVisible">
              <img w-full :src="qrcodeUrl" style="margin: 0 auto" alt="设备二维码" />
            </px-dialog>
          </div>
        </div>
        <div class="view-equip-item">
          <div class="label">设备标签</div>
          <div class="text">
            <PhotoUpload photoType="view" :photoData="{ moduleName: 'eqpFile' }" :photoList="qrcodeImg" />
          </div>
        </div>
      </div>
    </div>
    <div class="view-equip-title">其他信息</div>
    <div class="view-equip-wrap">
      <div class="view-equip-content">
        <div class="view-equip-item">
          <div class="label">合同名称</div>
          <div class="text">{{ eqpDetailData.htName }}</div>
        </div>
        <div class="view-equip-item">
          <div class="label">合同编号</div>
          <div class="text">{{ eqpDetailData.htCode }}</div>
        </div>
        <div class="view-equip-item">
          <div class="label">设备厂家</div>
          <div class="text">{{ eqpDetailData.manufacturer }}</div>
        </div>
      </div>
      <div class="view-equip-content">
        <div class="view-equip-item">
          <div class="label">厂家联系人</div>
          <div class="text">{{ eqpDetailData.manufacturerContact }}</div>
        </div>
        <div class="view-equip-item">
          <div class="label">厂家联系电话</div>
          <div class="text">{{ eqpDetailData.manufacturerPhone }}</div>
        </div>
        <div class="view-equip-item">
          <div class="label">设备负责人</div>
          <div class="text">{{ eqpDetailData.principalName }}</div>
        </div>
      </div>
      <div class="view-equip-content">
        <div class="view-equip-item">
          <div class="label">出厂日期</div>
          <div class="text">{{ eqpDetailData.manufactureDate }}</div>
        </div>
        <div class="view-equip-item">
          <div class="label">质保结束日期</div>
          <div class="text">{{ eqpDetailData.warrantyEndDate }}</div>
        </div>
        <div class="view-equip-item">
          <div class="label">设备定值</div>
          <div class="text">{{ eqpDetailData.constantVal }}</div>
        </div>
      </div>
      <div class="view-equip-content">
        <div class="view-equip-item plus">
          <div class="label">设备描述</div>
          <div class="text">{{ eqpDetailData.description }}</div>
        </div>
      </div>
      <div class="view-equip-content">
        <div class="view-equip-item large">
          <div class="label">设备图片</div>
          <div class="text">
            <PhotoUpload photoType="view" :photoData="{ moduleName: 'eqp' }" :photoList="props.eqpDetailData.pictureList" />
          </div>
        </div>
      </div>
    </div>
    <div class="view-equip-title">自定义扩展信息</div>
    <px-table :data="eqpDetailData.extInfoMap" style="margin-bottom: 16px" class="equip-table" size="small" max-height="400" border>
      <px-table-column min-width="120" show-overflow-tooltip label="扩展信息名称" align="center" prop="key" />
      <px-table-column min-width="180" show-overflow-tooltip label="扩展内容" align="center" prop="value" />
    </px-table>
    <div class="view-equip-title">相关资料</div>
    <div class="view-equip-content">
      <FileUpload fileType="view" :fileData="{ moduleName: 'eqp' }" :fileList="eqpDetailData.extFileList" />
    </div>
  </div>
</template>

<script lang="ts" setup>
import FileUpload from "@/components/Upload/FileUpload.vue";
import PhotoUpload from "@/components/Upload/PhotoUpload.vue";
import { getToken } from "@/utils/auth";
import { dataURLtoBlob } from "@/utils/common";
import axios from "axios";
import { ref, watchEffect } from "vue";

const qrcodeImg = ref([]); // 设备二维码文件

const tagBorderColorList = {
  1: "#3B82F6", // 正常
  2: "#F59E0B", // 带病运行
  3: "#10B981", // 备机
  4: "#EF4444", // 故障
  5: "#909399" // 未上线
};

const tagBgColorList = {
  1: "#EFF6FF",
  2: "#FEF5E6",
  3: "#E8F8F3",
  4: "#FEECEC",
  5: "#F4F4F5"
};
const props = defineProps(["eqpDetailData"]);

const qrcodeUrl = ref("");
const dialogVisible = ref(false);
const qrcodeList = ref([]);

const photoPreview = () => {
  dialogVisible.value = true;
};

const photoDownload = file => {
  const link = document.createElement("a");
  link.style.display = "none";
  link.href = file.url;
  link.setAttribute("download", file.name);
  document.body.appendChild(link);
  link.click();

  document.body.removeChild(link);
};

const getUrl = async () => {
  axios({
    method: "post",
    url: "/ifp/digitaltwins/api/v1/equipment/createQrCode",
    data: { eqpId: props.eqpDetailData.eqpId },
    headers: {
      "Content-Type": "application/json",
      Authorization: "Bearer " + getToken().accessToken || "",
      facCode: localStorage.getItem("facCode") || ""
    }
  }).then(async res => {
    const blob = dataURLtoBlob(res.data);
    const imgSrc = URL.createObjectURL(blob);
    qrcodeUrl.value = imgSrc; // 图片下载地址
    qrcodeList.value = [];
    qrcodeList.value.push({ url: res.data, name: "设备二维码" }); // 图片展示地址
  });
};

const tempManage = ref("");

watchEffect(() => {
  if (props.eqpDetailData.eqpId) {
    const { manageAttr, bigFileDTO } = props.eqpDetailData;
    qrcodeImg.value = bigFileDTO ? [bigFileDTO] : [];
    const arrEnum = {
      1: "计量器具",
      2: "特种设备",
      3: "定期校验仪器仪表"
    };
    if (manageAttr) {
      tempManage.value = manageAttr
        ?.split(",")
        ?.map(item => arrEnum[item])
        ?.join(",");
    } else {
      tempManage.value = "";
    }
    getUrl();
  }
});
</script>

<style lang="scss" scoped>
@import url("@/views/all/equip/scss/view-detail.scss");

:deep(.px-upload--picture-card) {
  display: none;
}
</style>
